<template>
	<view class="wrapper">
		<radio-group v-model="value" style="height: 100vh;">
			<view style="width: 100%;">
				<view class="content" v-for="item in list">
					<view class="top">
						<text>{{item.consigneeName}}</text>
						<text style="margin-left: 64rpx;">{{item.consigneePhone}}</text>
						<text v-if="item.isDefault==1" style="color:#005DFF;margin-left: 20rpx;">默认</text>
					</view>
					<view class="bottom">
						<view class="bottom-address">{{item.address}}
						</view>
						<view class="bottom-address-icon">
							<image @click="redact(item.id)" class="bottom-icon" src="../../static/bianji.png" mode="">
							</image>
							<image @click="expurgate(item.id)" class="bottom-icon" src="../../static/deletade.png"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</radio-group>
		<!-- 新建收货地址 -->
		<view style="width: 100%;display: flex;justify-content: center;align-items: center;">
			<view class="Construction" @click="TheGoods()" v-if="content.length <= 5">
				新建收货地址
			</view>
			<view class="" v-else></view>
		</view>
	</view>
</template>

<script>
	import {
		addressList,
		addressDelete
	} from '@/api/url.js'


	export default {
		data() {
			return {
				content: [],
				value: '',
				token: uni.getStorageSync('token'),
				list: []
			}
		},
		onShow() {
			this.address();
		},
		components: {

		},
		methods: {
			TheGoods() { //新建收货地址
				if (this.content.length <= 5) {
					uni.navigateTo({
						url: '/pages/user/addressModify'
					})
				} else {
					uni.showToast({
						title: '地址数量超出限制',
						icon: 'none'
					})
				}
			},

			async expurgate(e) { //删除地址.
				var params = {
					ids: e
				}
				addressDelete(params, this.token).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						setTimeout(() => {
							uni.showToast({
								title: '删除成功',
								icon: 'none',
							});
						}, 500)
						this.address();
					}
				})

			},

			// 点击勾选按钮设置下单地址
			async radioGroupChange(e) {
				console.log(e, 'e');
				let url = this.$serverUrl('/api/address/setDefaultAddress');
				let data = {
					id: e
				};
				let res = await this.$api.requestGet(url, data);
				console.log('setDefaultAddress', res);
			},
			async default () {
				let url = this.$serverUrl('/api/address/getDefaultAddress');
				let res = await this.$api.requestGet(url);
				this.value = res.data.data.id;
			},
			address() {
				var params = {
					pageNum: 1,
					pageSize: 10,
					orderByColumn:"is_default,id",
					isAsc:"desc"
				}
				addressList(params, this.token).then(res => {
					console.log(res)
					this.list = res.data.rows
				})
			},
			redact(id) { //跳转编辑地址
				console.log('id', id)
				uni.navigateTo({
					url: '/pages/user/addressModify?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
	}

	.wrapper {
		width: 100%;
		height: 100vh;
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;

		.content {
			width: 100%;
			height: 175rpx;
			background-color: #fff;
			padding: 32rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			border-bottom: 2rpx solid #F6F6F6;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			.top {
				width: 100%;
				display: flex;
				font-weight: 400;
			}

			.bottom {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;

				.bottom-address {
					width: 90%;
					margin-top: 24rpx;
					color: #CFCFCf;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.bottom-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.Construction {
			width: 590rpx;
			height: 82rpx;
			background: linear-gradient(90deg, #3AA3FF, #005DFF);
			box-shadow: 0rpx 3rpx 10rpx rgba(69, 201, 166, 0.1600);
			opacity: 1;
			border-radius: 49rpx;
			text-align: center;
			line-height: 82rpx;
			color: #FFF;
			margin-bottom: 70rpx;
		}

		.bottom-address-icon {
			width: 10%;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}
	}
</style>